<template>
  <div class="header">
    <el-container>
      <el-header height="80px">
        <el-row :gutter="20">
          <el-col :span="4" :offset="2"
            ><img class="logo" src="@/assets/logo.jpg" height="60px"
          /></el-col>
          <el-col :span="9" :offset="1"
            ><ul class="type-list">
              <li v-for="item in menuList" :key="item.id">
                <router-link :to="item.path"
                  ><span :class="{ isactive: item.path === $route.path }">{{
                    item.name
                  }}</span></router-link
                >
              </li>
            </ul>
          </el-col>
          <el-col :span="5" :offset="1"
            ><div class="search">
              <div class="search-input">
                <el-popover
                  ref="popover"
                  placement="bottom-end"
                  width="240"
                  trigger="manual"
                  v-model="isShowPop"
                >
                  <el-input
                    slot="reference"
                    style="width: 240px"
                    placeholder="请输入歌名、歌词、歌手或专辑"
                    v-model="searchValue"
                    @blur="doneSearch"
                    @focus="ShowSearch"
                  ></el-input>

                  <!-- template只是用来告知弹窗实际显示内容从这里开始 -->
                  <template>
                    <div class="hotkey" v-show="isShowPop">
                      <ul v-show="ishot">
                        <h5>热门搜索</h5>
                        <li
                          v-for="(item, index) in searchList"
                          :key="index"
                          @click="hotJump(item)"
                        >
                          <span>{{ index + 1 }}.</span> {{ item.first }}
                        </li>
                      </ul>
                      <div class="suggestkey" v-show="!ishot">
                        <ul
                          class="suggest-content"
                          v-for="(val, key, i) in suggestList"
                          :key="i"
                        >
                          <h4>{{ suggestType[key] }}</h4>
                          <li
                            v-for="item in val"
                            :key="item.id"
                            @click="suggestJump(item)"
                          >
                            <div v-if="suggestType[key] === '单曲'">
                              {{ item.name }}- {{ item.artists[0].name }}
                            </div>
                            <div v-else-if="suggestType[key] === '专辑'">
                              {{ item.name }}- {{ item.artist.name }}
                            </div>
                            <div v-else>
                              {{ item.name | handleFont }}
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </div>
              <div class="icon">
                <i class="el-icon-search" @click="jumpPage"></i>
              </div>
              <div class="login">
                <el-button  size="small" round @click="login">登录</el-button>
              </div>
            </div></el-col
          >
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>
<script>
import {mapMutations}from 'vuex'
export default {
  data() {
    return {
      menuList: [
        {
          name: "首页",
          id: 1,
          path: "/",
        },
        {
          name: "排行榜",
          id: 2,
          path: "/rank",
        },
        {
          name: "歌单",
          id: 3,
          path: "/playlist",
        },
        {
          name: "MV",
          id: 4,
          path: "/mvlist",
        },
        {
          name: "歌手",
          id: 5,
          path: "/artist",
        },
        {
          name: "我的音乐",
          id: 6,
          path: "/my",
        },
      ],
      searchValue: "", //输入框绑定值
      searchList: [], //热门搜索列表
      //搜索列表type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手,
      //  1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台,
      //  1014: 视频, 1018:综合, 2000:声音(搜索声音返回字段格式会不一样)
      suggestType: {
        songs: "单曲",
        artists: "歌手",
        albums: "专辑",
        playlists: "歌单",
      }, //建议列表类别
      suggestList: null,
      suggest_params: { keywords: this.searchValue }, //建议搜索参数集中管理
      isShowPop: false, //控制是否显示搜索弹窗
      ishot: true, //控制是否为热门搜索还是建议搜索
    };
  },
  created() {},
  computed: {},
  watch: {
    searchValue(val) {
      this.suggest_params.keywords = this.searchValue; //每次输入框值变化重新赋值
      if (val) {
        this.isShowPop = true;
        this.suggestSearch(this.suggest_params);
      } else {
        this.isShowPop = false;
        this.searchList.length = 0;
      }
    },
  },
  methods: {
    ...mapMutations(['setloginDialogVisible']),
    async hotKeySearch() {
      //热门搜索
      this.ishot = true;
      const res = await this.$api.getHotKeySearch();
      // console.log(res.result.hots);
      this.searchList = res.result.hots;
    },
    async suggestSearch(params) {
      //关键词建议搜索
      this.ishot = false;
      const res = await this.$api.getSuggestSearch(params);
      // const res = await this.$api.getSuggestSearch(this.searchValue)
      console.log(res.result);
      let { albums, artists, playlists, songs } = res.result;
      this.suggestList = { songs, artists, albums, playlists };
      console.log(this.suggestList);
    },
    ShowSearch() {
      //获得焦点触发
      this.isShowPop = true;
      if (this.searchValue) {
        this.ishot = false;
        return;
      } else {
        this.ishot = true;
      }
      if (this.searchList.length == 0) {
        this.hotKeySearch();
      }
    },
    doneSearch() {
      //失去焦点触发
      setTimeout(() => {
        this.isShowPop = false;
      }, 200);
    },
    hotJump(way) {
      //热门搜索点击事件触发
      this.isShowPop = false;
      if (way.first === this.$route.query.keywords) {
        return;
      }
      this.$router.push({ name: "Search", query: { keywords: way.first } });
      this.searchList.length = 0; //防止热门搜索一直不更新
    },
    suggestJump(way) {
      if (this.$router.query === way.name) {
        return;
      }
      this.$router.push({ name: "Search", query: { keywords: way.name } });
    },
    jumpPage() {
      if (this.searchValue) {
        if (this.$router.query ===this.searchValue) {
        return;
      }
        this.$router.push({
          name: "Search",
          query: { keywords: this.searchValue },
        });
      } else {
        this.isShowPop = false;
      }
    },
    login(){
        this.setloginDialogVisible(true);
    }
  },
};
</script>
<style lang="less" scoped>
.el-header {
  color: #333;
  background-color: #fff;
  text-align: center;
  width: 100%;
  line-height: 80px;
  box-shadow: 0 2px 10px 0 rgba(52, 52, 52, 0.1);
  .logo {
    margin-left: -50px;
  }
  .type-list {
    display: flex;
    align-items: center;
    margin-left: -80px;
    li {
      margin-right: 10px;
      font-size: 14px;
      line-height: 78px;
      border-bottom: 2px solid transparent;
      span {
        color: #909399;
        display: inline-block;
        padding: 0 20px;
      }
      .isactive {
        color: #333;
        border-bottom: 2px solid #ff641e;
      }
    }
  }
  .search {
    display: flex;
    margin-left: -100px;
    justify-content: space-around;
    align-items: center;
    /deep/.el-input {
      input {
        border: none;
      }
      height: 65px;
      border-bottom: 1px solid #999;
    }
    .el-icon-search {
      cursor: pointer;
    }
  }
}
</style>
